<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Data Visualization Dashboard">
    <meta name="author" content="ACROBOTIC">
    <title>COVID-19 Data Visualization Dashboard</title>
    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
      .chart {
        width: 100%; 
        min-height: 450px;
      }
      .row {
        margin:0 !important;
      }
    </style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      var xhr = new XMLHttpRequest();
      var url = "getData.php";
      xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          if(xhr.responseText != null){
            var response = JSON.parse(xhr.responseText);
            generatePlots(response);
          }
        }
      };
      xhr.open("GET", url, true);
      xhr.send();
    </script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 text-center">
          <h1>COVID-19 Visualization Dashboard</h1>
        </div>
        <div class="col-md-4 offset-md-4">
          <hr />
        </div>
        <div class="clearfix"></div>
        <div class="col-md-8">
          <div id="curve_chart" class="chart"></div>
        </div>
        <div class="col-md-3 text-center mt-3">
          <div class="alert alert-primary rounded-0" role="alert">
            <h4 class="alert-heading">Confirmed</h4>
          </div>
          <div><h4 id="confirmed"></h4></div>
          <div class="alert alert-danger mt-3 rounded-0" role="alert">
            <h4 class="alert-heading">Deaths</h4>
          </div>
          <div><h4 id="deaths"></h4></div>
          <div class="alert alert-warning mt-3 rounded-0" role="alert">
            <h4 class="alert-heading">Recovered</h4>
          </div>
          <div><h4 id="recovered"></h4></div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      function generatePlots(jsonData) {
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable();
          data.addColumn('date', 'Date');
          data.addColumn('number', 'Confirmed');
          data.addColumn('number', 'Deaths');
          data.addColumn('number', 'Recovered');
          const keys = Object.keys(jsonData);

          for (const key of keys) {
            var row = [ new Date(key),
                        Number(jsonData[key]['confirmed']),
                        Number(jsonData[key]['deaths']),
                        Number(jsonData[key]['recovered']) ];
            data.addRow(row);
          }

          var confirmed = jsonData[keys[keys.length-1]]['confirmed'];
          var deaths = jsonData[keys[keys.length-1]]['deaths'];
          var recovered = jsonData[keys[keys.length-1]]['recovered'];
          confirmed = confirmed.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          document.getElementById('confirmed').innerText = confirmed;
          deaths = deaths.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          document.getElementById('deaths').innerText = deaths;
          recovered = recovered.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          document.getElementById('recovered').innerText = recovered;

          var options = {
            title: 'COVID-19 Cases Per Day (US)',
            curveType: 'function',
            dataOpacity: '1.0',
            pointSize: 5,
            legend: { position: 'bottom' }
          };

          var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
          chart.draw(data, options);
        }
        function redrawCharts() {
            drawChart();
        };        
        window.addEventListener("resize", redrawCharts);
      }
    </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>
